Page({
  data: {
    name: '',
    gender: 1,
    mobile: '',
    currentDate: Date.now(),
    dateLayerVisible: false,
    houseLayerVisible: false,
    houseList: [],
    // 设置日期的可选范围
    maxDate: Date.now() + 1000 * 60 * 60 * 24 * 3
  },
  onLoad() {
    // 在刚进入该页面时，调用接口，请求数据 
    this.getHouseList()
  },
  // 获取报修的房屋列表
  async getHouseList() {
    // 请求数据接口
    const { code, data } = await wx.http.get('/house')
    // 检测接口返回的结果
    if (code !== 10000) return wx.utils.toast
    // 请求成功，修改数据，渲染页面
    this.setData({
      // 数据的渲染 
      houseList: data
    })
  },
  openHouseLayer() {
    this.setData({ houseLayerVisible: true })
  },
  closeHouseLayer() {
    this.setData({ houseLayerVisible: false })
  },
  openDateLayer() {
    this.setData({ dateLayerVisible: true })
  },
  closeDateLayer() {
    this.setData({ dateLayerVisible: false })
  },
  // 注意：这里想调用底部弹出模态面板，必须在这个组件上添加该事件对应的函数
  selectHouse(ev) {
    console.log(ev, '在访客页面点击选择房屋的响应结果');
    // 获取房屋的信息数据
    // 小技巧：如果说组件的打印的数据和后端接口的数据不一致，则可以解构的同时
    // 把属性的名称改成和后端一致的名称，方便直接传值
    const { id: houseId, name: houseName } = ev.detail
    // 页面中渲染
    this.setData({
      houseId,
      houseName
    })
  },
  // 获取用户输入的日期
  selectDate(ev) {
    console.log(ev, '点击获取日期的组价， 响应的结果');
    // 获取访客来访的时间
    this.setData({
      // 把获取到的访客时间，传入的data中
      visitDate: wx.utils.formatDate(ev.detail),
      // 选择完日期后，隐藏时间的弹层
      dateLayerVisible: false
    })
  },
  // 验证房屋是否选择
  verifyHouse() {
    const valid = !!this.data.houseName
    // 验证结果提示
    if (!valid) wx.utils.toast('请选择房屋信息!')
    // 返回验证结果
    return valid
  },
  // 验证业主姓名（必须为汉字）
  verifyName() {
    // 正则表达式
    const reg = /^[\u4e00-\u9fa5]{2,5}$/
    // 验证业主姓名
    const valid = reg.test(this.data.name.trim())
    // 验证结果提示
    if (!valid) wx.utils.toast('请填写真实中文姓名!')
    // 返回验证结果
    return valid
  },
  verifyMobile() {
    // 验证手机号
    const reg = /^[1][3-8]\d{9}$/
    const valid = reg.test(this.data.mobile)
    // 验证结果提示
    if (!valid) wx.utils.toast('请填写正确的手机号码!')
    // 返回验证结果
    return valid
  },
  async submitForm() {
    // 逐个验证表单的数据
    if (!this.verifyHouse()) return
    if (!this.verifyName()) return
    if (!this.verifyMobile()) return
    // 待提交的数据，因为后端提交表单需要的数据，data中有没有用的数据
    // 所以解构出来后端需要的数据，并提交
    const { houseId, name, gender, mobile, visitDate } = this.data
    // 请求接口
    const { code } = await wx.http.post('/visitor', {
      houseId, name, gender, mobile, visitDate
    })
    // 检测接口调用结果
    if (code !== 10000) return wx.utils.toast()
    // 跳转到访客列表页
    wx.navigateTo({
      url: '/visitor_pkg/pages/list/index'
    })
  },
})
